<template>
  <div>
    <div>
      <el-image src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgg-Cc8wUogKDlygYwgA84rAI.png.webp" />
      <h1 style="font-size: 30px; color: #666666; margin-top: 50px;">为什么需要WMS</h1>
      <p style="font-size: 16px; color: #666666; margin: 30px 0;">您的仓库是否面临以下令人头疼的问题</p>
    </div>




    <div style="background-color: #f8f8f8; width: 1200px; height: 370px; margin: 0 auto;">
      <div class="warehouse-div" id="warehouse-div-a" style="border-top: 3px solid red;">
        <h2>管理混乱</h2>
        <img width="72px" height="73px" src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg_O6X8wUohJvR7AcwsAk4sAk!100x100.png.webp" />
        <p>
          批号管理混乱<br>
          整零库区分不明显<br>
          商品随意堆放<br>
          库存不准确<br>
          找货难、养护难
        </p>
      </div>
      <div class="warehouse-div" id="warehouse-div-b" style="border-top: 3px solid orange;">
        <h2>信息孤岛</h2>
        <img width="72px" height="73px" src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgiLiX8wUowt3lhgMwsAk4sAk!60x60.png.webp" />
        <p>
          仓库调度指令传达混乱<br>
          装箱无明显标示<br>
          复核难、装车久<br>
          货、单不相符<br>
          时效内发不出货
        </p>
      </div>
      <div class="warehouse-div" id="warehouse-div-c" style="border-top: 3px solid green;">
        <h2>人员成本高</h2>
        <img width="72px" height="73px" src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgoNGX8wUo9vTXxgcwsAk4sAk!60x60.png.webp" />
        <p>
          仓库人员经常加班<br>
          当天任务却难以达成<br>
          绩效难以掌控<br>
          仓库人员流动大<br>
          新入职人员掌握仓库作业慢<br>
          不能很快上岗
        </p>
      </div>
      <div class="warehouse-div" id="warehouse-div-d" style="border-top: 3px solid blue;">
        <h2>数据难追溯</h2>
        <img width="72px" height="73px" src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg5dCX8wUordmszgYwsAk4sAk!100x100.png.webp" />
        <p>
          出入库手工记账<br>
          差错难以追寻<br>
          上下游企业不衔接<br>
          供应库存不清晰<br>
          弹性差
        </p>
      </div>
    </div>

    <h1 style="font-size: 30px; color: #4B4B4B; margin: 50px 0;">WMS可以做什么</h1>

    <div style="width: 1206px; height: 436px; margin: 0 auto 30px auto;">
      <div class="warehouse-div-img hover-div"
           id="hover-div-a"
           style="margin-right: 10px; width: 501px;">
        <img width="100%" height="100%" src="https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIKuj59kFKOabl8wDMIAPOIAK.jpg" />
        <p>
          多仓库管理<br>
          科学的库区部署，合理的货架规划，让仓储作业人员快速定位每一个商品
        </p>
      </div>
      <div class="warehouse-div-img hover-div"
           id="hover-div-b"
           style="margin-right: 10px; width: 396px;">
        <img width="100%" height="100%" src="https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIKuj59kFKODWloEFMIAPOIAK.jpg" />
        <p>
          多码制管理<br>
          支持多种条码模式，全程有效监管，精确到每一个动作，快速预警
        </p>
      </div>
      <div class="warehouse-div-img hover-div"
           id="hover-div-c"
           style="width: 283px;">
        <img width="100%" height="100%" src="https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIKuj59kFKOyz5vgBMIAPOIAK.jpg" />
        <p>
          协同作业<br>
          与上下游共享库存数据，实时掌握库存动态，方便仓库调度，企业决策
        </p>
      </div>
      <div class="warehouse-div-img hover-div"
           id="hover-div-d"
           style="margin-right: 10px; margin-top: 10px; width: 283px;">
        <img width="100%" height="100%" src="https://1.s140i.faiusr.com/2/AIwBCAAQAhgAILuXm9oFKPX3kLUHMIAPOIAK.jpg" />
        <p>
          实时预警<br>
          商品近效期预警、出入库防错预警、库存上下线预警
        </p>
      </div>
      <div class="warehouse-div-img hover-div"
           id="hover-div-e"
           style="margin-right: 10px; margin-top: 10px; width: 396px;">
        <img width="100%" height="100%" src="https://1.s140i.faiusr.com/2/AIwBCAAQAhgAILuXm9oFKMupre4BMIAPOIAK.jpg" />
        <p>
          批次与包装管理<br>
          商品出入库自动计算适合的包装，灵活的商品批次生成原则使得商品精确追溯
        </p>
      </div>
      <div class="warehouse-div-img hover-div"
           id="hover-div-f"
           style="width: 501px; margin-top: 10px;">
        <img width="100%" height="100%" src="https://1.s140i.faiusr.com/2/AIwBCAAQAhgAII_96NwFKOLu08wBMIAPOPwL.jpg" />
        <p>
          多终端操作<br>
          支持APP端、电脑端、RF手持多种终端，数据实时传输，离线断网自动采集。
        </p>
      </div>
    </div>

    <div id="medication-div-footer">
      <el-button style="font-size: 18px;width: 180px; height: 55px; margin-top: 45px"
                 @click="dialogFormVisible = true">马上体验
      </el-button>
    </div>

    <el-dialog title="请填写您的信息" :visible.sync="dialogFormVisible">
      <span style="color: #666666; font-size: 12px;">亲爱的朋友，为更好的为您服务，请您填写以下信息或致电400-86-18580，我们的工作人员会尽快与您联系！</span>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机" prop="customerPhone">
          <el-input v-model="ruleForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="customerName">
          <el-input v-model="ruleForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="行业" prop="customerIndustry">
          <el-input v-model="ruleForm.customerIndustry"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="warning" @click="dialogFormVisible = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "WarehouseView",
  data() {
    return {
      /*新增客户*/
      dialogFormVisible: false,
      ruleForm: {
        customerPhone: '',
        customerName: '',
        customerIndustry: '',
      },
      rules: {
        customerPhone: [
          {required: true, message: '请输入您的手机号', trigger: 'blur'},
          {pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        customerName: [
          {required: true, message: '请输入您的姓名', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ],
        customerIndustry: [
          {required: true, message: '请输入您所在行业', trigger: 'blur'},
          {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
        ]
      },
      formLabelWidth: '100px'


    }
  },

  methods:{
    /*添加*/
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8080/customer/insert';
          let jsonData = {
            customerPhone: this.ruleForm.customerPhone,
            customerName: this.ruleForm.customerName,
            customerIndustry: this.ruleForm.customerIndustry
          };
          this.axios({
            method: 'post',
            url: url,
            headers: { 'Content-Type': 'application/json' },
            data: JSON.stringify(jsonData)       //将参数转为json格式
          }).then((response) =>{
            let jsonResult = response.data;
            if (jsonResult.code == 200){
              this.$message({
                message:'提交成功!',
                type:'sucess'
              });
              this.resetForm(formName);
              this.dialogFormVisible = false;
            }else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }

}
</script>

<style scoped>
@keyframes enter1 {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1) translate3d(0, 300px, 0);
    animation-timing-function: linear;
  }
  50% {
    opacity: 0.5;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
}
#warehouse-div-a {
  animation: 2s linear 0s normal enter1;
}
#warehouse-div-b {
  animation: 3s linear 0s normal enter1;
}
#warehouse-div-c {
  animation: 4s linear 0s normal enter1;
}
#warehouse-div-d {
  animation: 5s linear 0s normal enter1;
}


@keyframes enter {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1) translate3d(1500px, 0, 0);
    animation-timing-function: linear;
  }
  50% {
    opacity: 0.5;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
}
#hover-div-a {
  animation: 2s linear 0s normal enter;
}
#hover-div-b {
  animation: 2.5s linear 0s normal enter;
}
#hover-div-c {
  animation: 3s linear 0s normal enter;
}
#hover-div-d {
  animation: 3.5s linear 0s normal enter;
}
#hover-div-e {
  animation: 4s linear 0s normal enter;
}
#hover-div-f {
  animation: 4.5s linear 0s normal enter;
}


.hover-div {
  position: relative;
}

.hover-div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 151, 243, 0.5);  /* 设置半透明背景颜色 */
  opacity: 0;  /* 初始隐藏 */
  transition: opacity 0.3s ease;  /* 添加过渡效果，使显示/隐藏更平滑 */
}

.hover-div:hover::before {
  opacity: 1;  /* 悬停时显示背景颜色 */
}

.hover-div p {
  line-height: 1.5;
  color: white;
  opacity: 0;  /* 初始隐藏 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 将 <p> 标签定位到中心位置 */
  transition: opacity 0.3s ease;  /* 添加过渡效果，使显示/隐藏更平滑 */
}

.hover-div:hover p {
  opacity: 1;  /* 悬停时显示 <p> 标签 */
}



.warehouse-div-img {
  float: left;
  height: 213px;
}

.warehouse-div h2 {
  margin: 25px auto;
  color: #4b4b4b;
  font-size: 20px;
}
.warehouse-div p {
  margin-top: 10px;
  line-height: 1.5;
  color: #999999;
  font-size: 14px;
}
.warehouse-div {
  vertical-align: top;
  display: inline-block;
  background-color: white;
  margin: 20px 0 10px 10px;
  width: 230px;
  height: 320px;
}

#medication-div-footer {
  margin-top: 30px;
  height: 130px;
  background-image: url('../../../assets/footer.jpg')
}

</style>